<template>
  <el-form
    :inline="inline"
    :model="form"
    ref="queryForm"
    label-width="auto"
    @submit.native.prevent
  >
    <el-form-item
      v-if="formData.length != 0 && formData[0].status === '1'"
      :key="formData[0].prop"
      :label="formData[0].name"
    >
      <el-input
        size="small"
        v-model="form[formData[0].prop]"
        :placeholder="'请输入' + formData[0].name"
        clearable
      >
      </el-input>
    </el-form-item>
    <el-form-item
      v-if="formData.length != 1 && formData[1]&&formData[1].status === '1'"
      :key="formData[1].prop"
      :label="formData[1].name"
    >
      <template v-if="formData[1].status === '1'">
        <!--根据type来显示是什么标签-->
        <el-select
          v-model="form[formData[1].prop]"
          placeholder="请选择"
          v-if="formData[1].componentType === 'el-select'"
        >
          <el-option
            v-for="dict in formData[1].optionValue"
            :key="dict.id"
            :label="dict.systemName ||!dict.name ? dict.description : dict.name"
            :value="
              typeof form[formData[1].prop] == 'number'
                ? Number(dict.id)
                : String(dict.id)
            "
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="form[formData[1].prop]"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          v-else-if="formData[1].componentType === 'el-date-picker'"
        >
        </el-date-picker>
        <el-input
          size="small"
          v-model="form[formData[1].prop]"
          :placeholder="'请输入' + formData[1].name"
          clearable
          v-else
        >
        </el-input>
      </template>
    </el-form-item>
    <el-form-item v-if="formData.length != 0">
      <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        v-preventReClick
        @click="handleQuery"
        >搜索
      </el-button>
      <el-button
        type="info"
        icon="el-icon-refresh"
        size="mini"
        v-preventReClick
        @click="resetQuery"
        >重置
      </el-button>
      <el-button
        v-if="formData.length > 2"
        icon="el-icon-arrow-down"
        size="mini"
        id="more-attr"
        v-preventReClick
        @click="moreattr"
        >更多属性
      </el-button>
    </el-form-item>
    <div id="more-list" style="display: none">
      <el-form-item
        v-for="item in formData.slice(1)"
        :key="item.prop"
        :label="item.name"
      >
        <template v-if="item.status === '1'">
          <!--根据type来显示是什么标签-->
          <el-select
            v-model="form[formData[1].prop]"
            placeholder="请选择"
            v-if="item.componentType === 'el-select'"
          >
            <el-option
              v-for="item in item.optionValue"
              :key="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
          <el-date-picker
            v-model="form[item.prop]"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-if="item.componentType === 'el-date-picker'"
          >
          </el-date-picker>
          <el-input
            size="small"
            v-model="form[item.prop]"
            :placeholder="'请输入' + item.name"
            clearable
            v-else
          >
          </el-input>
        </template>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
export default {
  name: "dynamicSearchForm",
  props: {
    inline: Boolean,
    form: Object,
    formData: Array,
    pageSize: {
      type:Number,
      default:30,
    }
  },
  data() {
    return {};
  },
  watch:{
    formData(ov,nv){
      this.handleQuery()
    }
  },
  methods: {
    //更多属性
    moreattr() {
      var div = document.getElementById("more-list");
      if (div.style.display === "none") {
        div.style.display = "block";
        document
          .getElementById("more-attr")
          .setAttribute("icon", "el-icon-arrow-up");
      } else {
        div.style.display = "none";
        document
          .getElementById("more-attr")
          .setAttribute("icon", "el-icon-arrow-down");
      }
    },
    //向父组件传递数据
    postForm(params) {
      var obj = {};
      if (params == "search") {
        if (this.form.createTime) {
          this.form.beginTime = this.form.createTime[0];
          if (this.form.createTime[1]) {
            this.form.endTime = this.form.createTime[1];
          }
          delete this.form.createTime;
        }
        obj = this.form;
      } else {
        obj = { pageNum: 1, pageSize: this.pageSize };
      }
      this.$emit("postForm", obj);
    },
    //查询按钮
    handleQuery() {
      this.postForm("search");
    },
    //重置
    resetQuery() {
      this.postForm("reset");
    },
  },
};
</script>

<style>
#more-list {
  background-color: rgb(220, 223, 230);
  padding: 10px;
}
</style>
